<template>
  <div class="charge-container">
    <template>
      <el-table :data="vipProductList"
      v-loading="loading"
      border style="width: 100%">
        <el-table-column align="center" label="产品图片" width="130">
          <!-- 插槽作用域 -->
          <template v-slot="{ row }">
            <el-avatar
              shape="square"
              :size="80"
              fit="scale-down"
              :src="row.imageUrl"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" align="center">
        </el-table-column>
        <el-table-column prop="description" label="产品描述" align="center">
        </el-table-column>
        <el-table-column prop="price" label="价格(元)" align="center">
        </el-table-column>
        <el-table-column prop="inventory" label="库存" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              @click="pre_order(row)"
              v-isBuy="row.inventory"
              icon="iconfont icon-vip3"
              >充值</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
import * as payApi from "@/api/pay";
export default {
  //自定义指令
  directives: {
    isBuy: {
      inserted(el, binding) {
        console.log(el, binding);
        if (binding.value === 0) {
          let oldClassName = el.className;
          el.className = oldClassName + " is-disabled";
          el.disabled = true;
        }
      },
    },
  },

  meta: {
    title: "vipCharge",
    icon: "iconfont icon-chongzhi",
  },
  methods: {
    pre_order(row) {
      //弹出提示窗口
    this.$confirm('您正在充值'+row.description,'购买提示',{
      type:"info"
    }).then(()=>{
      //点击了确定按钮
      //将当前的产品对象存到vuex,定义的字段,currentProduct
      this.$store.commit("SET_CURRENT_PRODUCT",row);

      //跳转到下单页面,preorder
      this.$router.push({name:'preorder'})

    }).catch(()=>{
      //点击了取消按钮
      this.$message.warning('已取消购买')
    })
    },
  },
  async created() {
    this.loading=true
    let res = await payApi.getVipProduct();
    console.log(res);
    this.loading=false
    this.vipProductList = res.data.data;

    
  },
  data() {
    return {
      vipProductList: [],
      loading:true
    };
  },
};
</script>
<style scoped lang="less">
.el-avatar {
  /deep/ img {
    width: 100%;
  }
  height: 30px !important;
  background-color: #fff;
}
.el-button--primary {
  background-color: #05a000;
}
</style>